<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<script th:src="@{/static/js/vue.js}"></script>
<script th:src="@{/static/js/axios.min.js}"></script>
<body>
<h1>首页</h1>
<form th:action="@{/testRequestBody}" method="post">
    用户名：<input type="text" name="username"> <br>
    密码： <input type="password" name="password"> <br>
    <input type="submit" value="测试@RequestBody">
</form>

<form th:action="@{/testRequestEntity}" method="post">
    用户名：<input type="text" name="username"> <br>
    密码： <input type="password" name="password"> <br>
    <input type="submit" value="testRequestEntity">
</form>

<a th:href="@{/testResponse}">测试通过ServletAPI的response对象相应浏览器.</a> <br>
<a th:href="@{/testResponseBody}">测试通过@ResponseBody的response对象相应浏览器.</a> <br>
<a th:href="@{/testResponseUser}">测试通过@ResponseBody的response对象User相应浏览器.</a> <br>


<div id="app">
    <a @click="testAxios" th:href="@{/testAxios}">SpringMVC处理ajax</a>
</div>
<script>
    new Vue({
        el:"#app",
        methods : {
            testAxios:function(e) {
               axios({
                   method :"post",
                   url:e.target.href,
                   params : {
                       username:"admin",
                       password : "123456"
                   }
               }).then(function (response) {
                   console.log(response)
                   alert(response.data)
               })
                e.preventDefault()
            }
        }
    })
</script>
</body>
</html>